<template>
  <div>
    <el-bread />
    <el-button
      type="primary"
      size="mini"
      plain
      style="margin-top: 10px"
      @click="addDialog"
      >添加</el-button
    >
    <!-- 数据列表 -->
    <v-list @edit="edit"></v-list>
    <!-- 弹框组件 -->
    <v-dialog ref="diaRef" :isShow="isShow" @cancel="cancel" :isAdd="isAdd"></v-dialog>
  </div>
</template>
<script>
// 引入封装好的列表组件
import vList from './list'
import vDialog from './dialog'
export default {
  data() {
    return {
        isShow:false, // 控制子组件（弹框）显示和隐藏
        isAdd:true, // 用于判断是添加还是编辑 默认是添加 
    };
  },
  methods: {
    // 封装一个点击事件 出现弹框的事件
    addDialog(){
        // 告诉显示框 isShow需要显示出来
        this.isShow = true
        // 并且告诉弹框是一个添加
        this.isAdd = true
    },
    cancel(e){
        // console.log(e);
        this.isShow = e
    },
    // 封装一个编辑打开弹框事件
    edit(e){
      // 打开弹框
      this.isShow = true
      // 告诉你弹框是一个编辑
      this.isAdd = false
      // 直接调用弹框的方式，父组件如何直接触发子组件的方法？ ref属性
      // console.log(this.$refs.diaRef);
      this.$refs.diaRef.lookup(e)
    }
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
  components: {
    vList,vDialog
  },
};
</script>
<style scoped></style>
